<template>
  <div ref="risingSun" class="rising-sun"></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '@u/resize'

export default {
  name: 'VisitSource',
  mixins: [resize],
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      let option = {
        series: {
          type: 'sunburst',
          tooltip: {
            trigger: 'item'
          },
          emphasis: {
            focus: 'ancestor'
          },
          data: [
            {
              name: 'Grandpa',
              children: [
                {
                  name: 'Uncle Leo',
                  value: 15,
                  children: [
                    {
                      name: 'Cousin Jack',
                      value: 2
                    },
                    {
                      name: 'Cousin Mary',
                      value: 5,
                      children: [
                        {
                          name: 'Jackson',
                          value: 2
                        }
                      ]
                    },
                    {
                      name: 'Cousin Ben',
                      value: 4
                    }
                  ]
                },
                {
                  name: 'Father',
                  value: 10,
                  children: [
                    {
                      name: 'Me',
                      value: 5
                    },
                    {
                      name: 'Brother Peter',
                      value: 1
                    }
                  ]
                }
              ]
            },
            {
              name: 'Nancy',
              children: [
                {
                  name: 'Uncle Nike',
                  children: [
                    {
                      name: 'Cousin Betty',
                      value: 1
                    },
                    {
                      name: 'Cousin Jenny',
                      value: 2
                    }
                  ]
                }
              ]
            }
          ],
          radius: [0, '90%'],
          label: {
            rotate: 'radial'
          }
        }
      }

      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.rising-sun {
  height: 300px;
  width: 100%;
}
</style>
